<template>
    <div class="food-detail">
      <h1 class="food-name">{{ food.name }}</h1>
      <h5>由{{ uploadname }}编辑于{{ uploadtime }}</h5>
      <img :src="food.image" :alt="food.name" class="food-image" style="width: 60%; height: auto; border-radius: 5px;">
      <h2>描述：</h2>
      <p class="food-description">{{ food.content }}</p>
      <h2>具体内容：</h2>
      <p class="food-description">{{ food.detail }}</p>
      <button class="like-button" @click="toggleLike">
        <img v-bind:src="likeIcon()" :alt="food.name" class="like-icon">
        <span class="like-count">{{ likesTotal }}</span>
      </button>
      <button class="collect-button" @click="toggleCollect">
        <img v-bind:src="likeCollect()" alt="收藏" class="collect-icon">
        <span class="like-count">{{ collectTotal }}</span>
      </button>

      <h2>评论：</h2>
      <div class="comments">
        <div v-for="(comment, index) in comments" :key="index" class="comment">
          <p>{{ reviewname[index] }}: {{ comment.content }}</p>
          <p style="text-align: right;font-size: 10px;">{{ comment.reviewtime }}</p>
        </div>
      </div>

      <div class="new-comment">
        <form @submit.prevent="addComment">
          <input type="text" v-model="newComment.content" placeholder="添加你的评论..." required>
          <button type="submit">提交评论</button>
        </form>
      </div>
    </div>
    
</template>
  
  <script>
import axios from 'axios';
import Vue from 'vue';
import {getDate} from '../utils/getDate'
axios.defaults.baseURL="http://localhost:8087"
  export default {
    
   data()
   {
    return{
          food:this.$route.query,
          username:null,
          phone:null,
          uploadtime:null,
          uploadname:null,
          likesTotal:0,
          collectTotal:0,
          reviewTotal:0,
          likes:false,
          collect:false,
          comments:[],
          reviewname:[],
          newComment:{
          reviewid:null,
          type:null,
          objectid:null,
          id:null,
          content:null,
          reviewtime:null
        }
    };
   },
   created()
   {
      let userid=sessionStorage.getItem("userid")
      
      axios.post(`/findIfLikes?likesid=`+userid+`&type=1&objectid=`+this.food.objectid).then(res=>{
          if(res.data){
            this.likes=true
            console.log(res.data)
          }else{
            this.likes=false
            console.log(res.data)
          }
        })
        axios.post(`/findIfCollect?collectid=`+userid+`&type=1&objectid=`+this.food.objectid).then(res=>{
          if(res.data){
            this.collect=true
            console.log(res.data)
          }else{
            this.collect=false
            console.log(res.data)
          }
        })
        axios.get(`/findLikes_total/${this.food.type}&&${this.food.objectid}`).then(res=>{
          // this.likesTotal[this.food.objectid]=(res.data.likesTotal)
          this.likesTotal=res.data.likesTotal
        })
        axios.get(`/findCollect_total/${this.food.type}&&${this.food.objectid}`).then(res=>{
          // this.collectTotal[this.food.objectid]=(res.data.collectTotal)
          this.collectTotal=res.data.collectTotal
        })
        axios.get(`/findReview_total/${this.food.type}&&${this.food.objectid}`).then(res=>{
          // this.reviewTotal[this.food.objectid]=(res.data.reviewTotal)
          this.reviewTotal=res.data.reviewTotal
        })
        axios.get(`/findReviewByObject/1&&${this.food.objectid}`).then(res=>{
          Vue.set(this,'comments',res.data)
          for(let i=0;i<this.comments.length;++i)
          axios.get(`/findUser/${this.comments[i].reviewid}`).then(res=>{
            Vue.set(this.reviewname,i,res.data.username)
            this.newComment.id=Math.max(this.newComment.id,this.comments[i].id)
          })
        })
        axios.get(`/findUser/${userid}`).then(res=>{
          this.username=res.data.username
        })
        axios.get(`/findUpload/${this.food.type}&&${this.food.objectid}`).then(res=>{
          this.uploadtime=res.data.uploadtime
          axios.get(`/findUser/${res.data.uploadid}`).then(res=>{
            this.uploadname=res.data.username
          })
        })
        this.newComment.reviewid=userid
        this.newComment.type=1
        this.newComment.objectid=this.food.objectid
        // console.log(this.newComment)
   },
   methods:{
      
        
        toggleLike() {
          let userid=sessionStorage.getItem("userid")
          if(userid)
          {
            this.likes = !this.likes;
            if(this.likes)
            {
                axios.post("/insertlikes?likesid="+userid+`&type=1&objectid=`+this.food.objectid).then(res=>{
                  ++this.likesTotal
                  console.log(res.data)
              })
            }
            else
            {
              axios.delete("/deletelikes?likesid="+userid+`&type=1&objectid=`+this.food.objectid).then(res=>{
                --this.likesTotal
                console.log(res.data)
              })
            }
          }else{
            alert('请先登录');
            this.$router.push({
                name:'login',
            })
          }
        
      },
        toggleCollect() {
          let userid=sessionStorage.getItem("userid")
          if(userid)
          {
            this.collect = !this.collect;
            if(this.collect)
            {
                axios.post("/insertcollect?collectid="+userid+`&type=1&objectid=`+this.food.objectid).then(res=>{
                  ++this.collectTotal
                  console.log(res.data)
              })
            }
            else
            {
              axios.delete("/deletecollect?collectid="+userid+`&type=1&objectid=`+this.food.objectid).then(res=>{
                --this.collectTotal
                console.log(res.data)
              })
            }
          }else{
            alert('请先登录');
            this.$router.push({
                name:'login',
            })
          }
      },
      likeIcon() {
        return this.likes  ? require('../assets/like.png') :require('../assets/unlike.png');
      },
      likeCollect() {
        return this.collect  ? require('../assets/collect.png') :require('../assets/discollect.png');
      },

     
      addComment()
      {
        let userid=sessionStorage.getItem("userid")
        let username=this.username
        console.log(this.username)
        if(userid)
        {
          let newComment={...this.newComment}
          newComment.reviewtime = getDate()
          newComment.id=newComment.id+1
          console.log(newComment)
          this.comments.push(newComment)
          // Vue.set(this.comments,this.comments.length,newComment)
          this.reviewname.push(username)
          // Vue.set(this.reviewname,this.comments.length,username)
          axios.post(`/insertreview?reviewid=`+newComment.reviewid+`&type=`+newComment.type+`&objectid=`+newComment.objectid+`&id=`+newComment.id+`&content=`+newComment.content+`&reviewtime=`+newComment.reviewtime).then(res=>{
            this.newComment.id=this.newComment.id+1
            console.log(res.data)
          })
          this.newComment.content="";
        }else{
          alert('请先登录');
          this.$router.push({
                name:'login',
            })
        }
        
      }
      

    
   }
  }
  </script>
  
  <style scoped>
  .food-detail {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .food-name {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }
  
  .food-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  
  .food-description {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .like-count {
    margin-left: 5px;
  font-size: 12px;
  color: black;
  }
  
  .collect-status {
    font-size: 1.4rem;
    margin-bottom: 20px;
  }
  
  /* 如果你需要添加返回按钮或其他导航元素，可以在这里添加样式 */
  .comments {
  margin-bottom: 5px;
}

.comment {
  border: 1px solid #ddd;
  padding: 0px 5px;
  margin-bottom: 5px;
  border-radius: 5px;
}

.new-comment {
  margin-top: 20px;
}

.new-comment input {
  width: 70%;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.new-comment button {
  padding: 10px 20px;
  border: none;
  background-color: #5cb85c;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.new-comment button:hover {
  background-color: #4cae4c;
}
.like-icon {
  width: 20px;
  height: 20px;
}
.collect-icon {
  width: 20px;
  height: 20px;
}
.collect-button{
  cursor: pointer;
  border: none;
  background: none;
  padding: 10px;
  margin-top: 10px;
}
.like-button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 10px;
  margin-top: 10px;
}
  </style>
  